<template>
  <el-card shadow="hover" class="mt-20">
    <el-button
      type="primary"
      icon="el-icon-plus"
      size="small"
      @click="addSpu"
      :disabled="!category3Id"
      >添加SPU</el-button
    >
    <el-table :data="spuList" border style="width: 100%" class="mt-20">
      <el-table-column
        prop="index"
        label="序号"
        width="80"
        type="index"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="spuName" label="SPU名称"> </el-table-column>
      <el-table-column prop="description" label="SPU描述"> </el-table-column>
      <el-table-column label="操作" fixed="right" align="center">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            title="添加SKU"
            @click="addSku(row)"
          ></el-button>
          <el-button
            type="warning"
            icon="el-icon-edit-outline"
            size="mini"
            title="修改SPU"
            @click="updateSku(row)"
          ></el-button>
          <el-button
            type="info"
            icon="el-icon-info"
            size="mini"
            title="查看SKU列表"
            @click="showSkuList(row.id,row.spuName)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            title="删除SPU"
            @click="delSpu(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="mt-20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout=" prev, pager, next, jumper, ->,sizes,total"
      :total="total"
    >
    </el-pagination>

    <el-dialog :title="`${spuName} => SKU列表 `" :visible.sync="dialogTableVisible">
      <el-table :data="skuList" border class="skuList_table" max-height="300px">
        <el-table-column
          property="skuName"
          label="名称"
          width="180"
        ></el-table-column>
        <el-table-column
          property="price"
          label="价格（元）"
          width="180"
        ></el-table-column>
        <el-table-column
          property="weight"
          label="重量（kg）"
          width="180"
        ></el-table-column>
        <el-table-column property="skuDefaultImg" label="默认图片">
          <template v-slot="{row}">
            <img :src="row.skuDefaultImg" class="skuDefaultImg"/>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-card>
</template>

<script>
import { getSpuListApi, removeSpuInfoApi } from "@/api/product/spu";
import { getSkuListBySpuIdApi } from "@/api/product/sku";
import { mapState, mapMutations } from "vuex";
export default {
  name: "SpuList",
  data() {
    return {
      total: 0,
      pageSize: 5,
      currentPage: 1,
      spuList: [],
      dialogTableVisible: false,
      spuName:'',
      skuList:[],
    };
  },
  mounted() {
    // this.getSpuList();
  },
  computed: {
    ...mapState("category", ["category3Id"]),
    ...mapState("spu", ["spu"]),
  },
  watch: {
    category3Id: {
      handler(category3Id) {
        if (!category3Id) return;
        this.getSpuList();
      },
      immediate: true,
    },
  },
  methods: {
    ...mapMutations("spu", ["UPDATE_SPU", "RESET"]),
    async showSkuList(id,spuName){
      this.dialogTableVisible = true
      this.spuName = spuName
      const res = await getSkuListBySpuIdApi(id)
      console.log(res);
      this.skuList = res.data
    },
    // 删除Spu
    async delSpu(row) {
      // console.log(row);
      const spuId = row.id;
      await removeSpuInfoApi(spuId);
      this.$message.success("spu删除成功");
      this.getSpuList();
    },
    // 分页获取spu列表
    async getSpuList() {
      const res = await getSpuListApi({
        page: this.currentPage,
        limit: this.pageSize,
        category3Id: this.category3Id,
      });
      const { records, total, size } = res.data;
      this.spuList = records;
      this.total = total;
      this.pageSize = size;
      // console.log(res);
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getSpuList();
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getSpuList();
    },
    addSpu() {
      this.$emit("setIsShow", 2);
      this.RESET();
    },
    updateSku(row) {
      this.$emit("setIsShow", 2);
      // console.log(row);
      this.UPDATE_SPU(row);
    },
    addSku(row) {
      this.$emit("setIsShow", 3);
      this.UPDATE_SPU(row);
    },
  },
};
</script>

<style scoped>
/* .skuList_table{
  height: 300px;
} */
.skuDefaultImg{
  width: 100px;
  height: 100px;
}

/* 修改表格的滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar{
    width: 10px !important;
    height: 10px !important;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb{
    background: #E5E5E5 !important;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track{
    background: #CCCCCC !important;
}
/* 处理空白问题 */
::v-deep .el-table colgroup col[name='gutter']{
    width: 11px;
}
::v-deep .el-table__body{
    width: 100% !important;
}
</style>
